<template>
  <div class="about">
    <h1>This is an about page</h1>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
  </div>

  <div
    class="main"
    id="main"
    style="float: left; width: 100%; height: 400px"
  ></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  initEcharts();
});

const initEcharts = () => {
  const option = {
    title: [
      {
        text: "Tangential Polar Bar Label Position (middle)",
      },
    ],
    polar: {
      radius: [30, "80%"],
    },
    angleAxis: {
      max: 4,
      startAngle: 75,
    },
    radiusAxis: {
      type: "category",
      data: ["a", "b", "c", "d"],
    },
    tooltip: {},
    series: {
      type: "bar",
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "middle",
        formatter: "{b}: {c}",
      },
    },
  };

  const myChart = echarts.init(document.getElementById("main")); // 图标初始化
  myChart.setOption(option); // 渲染页面
};
</script>
